<template>
  <div class="app-container">
    <el-form :model="queryForm" :rules="queryRules" ref="queryRef" label-width="100px" class="demo-ruleForm">
      <!--基本信息-->
      <el-card style="margin-top: -24px">
        <div class="title1">个人基本信息</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="活动名称" prop="name">
              <el-input v-model.trim="queryForm.name" placeholder="请输入姓名" clearable style="width: 96%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker v-model.trim="queryForm.birthday" clearable type="date" placeholder="选择日期" style="width: 96%">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="queryForm.sex" placeholder="请选择" clearable style="width: 96%">
                <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value" >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="identity_card">
              <el-input v-model.trim="queryForm.identity_card" placeholder="请输入身份证号" clearable style="width: 96%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="婚姻情况" prop="marriage">
              <el-select v-model="queryForm.marriage" placeholder="请选择.." clearable style="width: 96%">
                <el-option v-for="item in marriageList" :key="item.value" :label="item.label" :value="item.value" >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="教育程度" prop="education">
              <el-select v-model="queryForm.education" placeholder="请选择.." clearable style="width: 96%">
                <el-option v-for="item in educationList" :key="item.value" :label="item.label" :value="item.value" >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="居住地址" prop="address1">
              <el-input v-model.trim="queryForm.address1" placeholder="请输入居住地址" clearable style="width: 96%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="居住地址" prop="address1">
              <el-input v-model.trim="queryForm.address2" placeholder="请输入居住地址" clearable style="width: 96%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="电话" prop="phone">
              <el-input v-model.trim="queryForm.phone" placeholder="请输入居住地址" clearable style="width: 96%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="mobile_phone">
              <el-input v-model.trim="queryForm.mobile_phone" placeholder="请输入居住地址" clearable style="width: 96%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!--职业信息-->
      <el-card style="margin-top: 10px">
        <div class="title1">职业信息</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="现职公司" prop="company">
              <el-input v-model.trim="queryForm.company" placeholder="请输入现职公司" clearable style="width: 96%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属行业" prop="trade">
              <el-select v-model="queryForm.trade" placeholder="请输入所属行业" clearable style="width: 96%">
                <el-option v-for="item in tradeList" :key="item.value" :label="item.label" :value="item.value" >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="现职公司" prop="company_type">
              <el-input v-model.trim="queryForm.company_type" placeholder="请输入公司类型" clearable style="width: 96%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="现职公司" prop="company_email">
              <el-input v-model.trim="queryForm.company_email" placeholder="请输入公司邮箱" clearable style="width: 96%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="现职公司" prop="company_phone">
              <el-input v-model.trim="queryForm.company_phone" placeholder="请输入公司电话" clearable style="width: 96%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>
      </el-card>
      <!--收支情况-->
      <el-card>
        <div class="title1">收支情况</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收支情况" prop="incomeType">
              <el-select v-model="queryForm.incomeType" placeholder="请选择收支情况" clearable style="width: 96%">
                <el-option v-for="item in incomeTypeList" :key="item.value" :label="item.label" :value="item.value" >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收支情况" prop="income">
              <el-input v-model.trim="queryForm.income" placeholder="请备注收支情况.." clearable style="width: 96%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!--家庭联系人-->
      <el-card style="margin-top: 10px">
        <div class="title1">家庭联系人</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="关系" prop="contact">
              <el-input v-model.trim="queryForm.contact" placeholder="请输入联系人关系" clearable style="width: 96%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="contact_name">
              <el-input v-model.trim="queryForm.contact_name" placeholder="请输入联系人姓名" clearable style="width: 96%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号" prop="contact_phone">
              <el-input v-model.trim="queryForm.contact_phone" placeholder="请输入联系人手机号" clearable style="width: 96%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!-- 工作证明人 -->
      <el-card style="margin-top: 10px">
        <div class="title1">工作证明人</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="关系2" prop="contact2">
              <el-input v-model.trim="queryForm.contact2" placeholder="请输入关系2" clearable style="width: 96%;" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="contact2_name">
              <el-input v-model.trim="queryForm.contact_name" placeholder="请输入姓名" clearable style="width: 96%;" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机" prop="contact2_phone">
              <el-input v-model.trim="queryForm.contact_phone" placeholder="请输入手机" clearable style="width: 96%;" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门" prop="contact2_dep">
              <el-input v-model.trim="queryForm.contact2_dep" placeholder="请输入部门" clearable style="width: 96%;" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="职位" prop="contact2_pos">
              <el-input v-model.trim="queryForm.contact2_pos" placeholder="请输入职位" clearable style="width: 96%;" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model.trim="queryForm.remark" placeholder="请输入备注" clearable style="width: 96%;" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!--<el-form-item label="活动名称" prop="name">-->
      <!--  <el-input v-model="ruleForm.name"></el-input>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="活动区域" prop="region">-->
      <!--  <el-select v-model="ruleForm.region" placeholder="请选择活动区域">-->
      <!--    <el-option label="区域一" value="shanghai"></el-option>-->
      <!--    <el-option label="区域二" value="beijing"></el-option>-->
      <!--  </el-select>-->
      <!--</el-form-item>-->
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryForm:{
        name:"",
        birthday:'',
        sex:'',
        identity_card:'',
        marriage:'',
        education:'',
        address1:'',
        address2:'',
        phone:'',
        mobile_phone:'',
        company:'',
        trade:'',
        company_type:'',
        company_email:'',
        company_phone:'',
        income:'',
        incomeType:'',
        contact:'',
        contact_name:'',
        contact_phone:'',
        contact2:'',
        contact_name2:'',
        contact2_dep:'',
        contact2_pos:'',
        remark:'',



      },
      sexList:[
        {label:'男', value:'man'},
        {label:'女', value:'woman'}
      ],
      marriageList:[
        {label:'已婚',value:'married'},
        {label:'未婚',value:'unmarried'}
      ],
      educationList:[
        {label:'大学',value:'college'},
        {label:'高中',value:'highschool'}
      ],
      tradeList:[
        {label:'教育',value:'education'},
        {label:'金融',value:'finance'}
      ],
      incomeTypeList:[
        {label:'有',value:'play'},
        {label:'无',value:'noPlay'}
      ],
      queryRules:{},


    }
  },
  mounted() {
  },
  methods: {}
}
</script>
<style scoped lang="less">
.title1 {
  height: 40px;
  font-size: 16px;
  font-weight: 800;
  line-height: 40px;
  border-bottom: 1px solid #edebeb;
  margin-bottom: 20px;
}

</style>
